J) SurveySparrow 


Future-proof your Ul with Twigs 


Explore Twigs’ evolution—simplifying UI building and empowering 
developers to create with ease. 


Agenda 


Highlights the essentials for 
understanding Twigs 


01 The story behind 
Twigs 


Os Features of Twigs 


OS Twigs Ecosystem 


o2 What's Twigs? 


o4 Building blocks of 
Twigs 


OG Future Plans 


Let's rewind a little - Before Twigs 


Want to build a feature? Need a new one? 
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Utilize the SS Components Build it and make it reusable 


SS Components - A dedicated internal folder for crafting reusable UI components, powering up the entire 


repository! 


What obstacles stood in our way? 


EK 


(oY Quick & Easy 
ae) Building Uls should be simple, 


efficient and reliable 


Consistent Theme Scaling & Maintenance 


we needed a unified design Easily manage and scale your UI 
across products components with minimal effort 


Introducing Twigs 


A flexible, customizable and accessible React component 
library for building Uls 


Explore Twigs 


What are the features of Twigs? 


Accessibility e Extensibility e Themability 


gi Accessibility 


Ensures seamless navigation for all users with optimized keyboard events, 
ARIA labels, and other accessibility features. 


> Go to Demo 


Extensibility 


Customize with ease—Twigs offers limitless design possibilities, with support 
for variants and props such as ‘css’ and ‘as’ 


css prop: as prop: 
<Box <Box as = ‘span’ > The quick brown fox 
css={{ jumps over the lazy dog. </Box> 
width: 340, 
height: 250, 


padding: ‘$4 $8', 

border: 'Ipx solid $neutral200', 

borderRadius: ‘$lg’, 

boxShadow: '$sm', 

backgroundColor: '$white900', 
3} 


<Text size="sm"> Director of design </Text> 
</Box> 


«© Themability 


Flexible theming for easy custom styles and branding, with a professional and 
developer-friendly approach 


twigs.config.js src/index.js 
export default { import { theme } from ‘@root/twigs.config.js; 
theme: { 
extends: { <ThemeProvider theme={theme.extends}> 
colors: { <App /> 
primary: "#2E666D", </ThemeProvider> 
secondary: "#363A43", 
} 
fontSizes: { 
sm: "0.85rem", 
md: "Irem", 
Ig: "1.2rem", 
xl: "1.44rem", 
hi 
} 
} 
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Let's look at a requirement! 


We recently tackled the ambitious task of creating a 
miniature Google Docs-like editor. 


> My Research 


S 


D 
My Research 


I've spent over a week diving into the Lexical repo, uncovering how to 
best integrate it with plenty of “aha” moments 


> Twigs Solution 


Twigs Solution 


Using Twigs’ robust rich text editor as a foundation, we were 
able to successfully implement a feature-rich text editor 


> Final Output 
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Final Output 
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Title: The complete guide to understanding RFP Al 


Objective: 
In simple words, RFP Al is an automated solution to streamline the entire process of completing RFP 


documents from customers. This solution will automatically populate answers to the RFP document with 
the help of Al and directly reflect these responses in the uploaded .x\sx file. 


Terminologies 

- Reviewers: A group of users responsible for reviewing RFP documents to ensure the accuracy and clarity 
of answers. They may edit responses if any inconsistencies are identified. 

- Admin: Admin users are required to give final approval for the RFP document. Once approved, the 
document, including Al-generated answers, can be downloaded in a .xlsx format. 

- Confidence Score: Represents the accuracy level of the generated answer, classified as Inaccurate, 
Partial, or Accurate. 


Step-by-Step User Instructions 

Google Sign-In (Authentication): Users must log in using their SurveySparrow email ID for authentication. 
Q&As and File Upload Options: 

Prompt Entry: Users can enter a prompt to directly receive Al-generated answers. Related questions will 
also be suggested for each prompt. 

Upload .x\sx File: Users can upload a .x\sx file containing questions. After uploading, they will be asked to 
specify the company name and proceed to a column selection page where they define which columns 


contain questions and answers. It is recommended to remove any irrelevant sheets before generating 
answers. 


Results Page: 
The results page displays answers for all the selected sheets from the .x\sx file. Each answer is 


| 


> Visit Twigs Editor 


Building Blocks of Twigs 


Radix Ul Stitches 


Acts as the foundation for Enables adding vibrant styles to create 
constructing the Ul components dynamic, colorful components. 


At this point, you might be wondering! 


Is Twigs just another library? 


Nope! It’s much more than that 


We've built an ecosystem 


The Tools of Twigs 


Twigs Playground Twigs Icons Twigs Intellisense 


A sandbox to experiment with Twigs brings 125 sleek, A VS-Code extension to speed up 
Twigs components. developer-friendly icons to UI development with Twigs 
elevate your UI 


Twigs is now officially open-source 


Looking forward to seeing your interesting contribution! 


Visit Github 


What's the future plan for Twigs? 


Get ready to witness the most exciting innovation! 


Twigs Builder 


A drag-and-drop interface to effortlessly build sleek UI 
components—no coding required, just pure creativity! 


Let’s Discuss! 


If you have any questions or doubts, please feel free to ask now 


Thank You! 


Hope the session was informative and engaging! 


